		$(document).ready(function(){					
			var canvas = document.getElementById('canvas');//画布
			var stage = new JTopo.Stage(canvas);//舞台
			var scene = new JTopo.Scene(stage);//场景
			//显示工具栏 showJTopoToobar(stage);
			scene.background = './img/bg.jpg';//场景背景图片
			
			//节点 Node; text 文字相关, border 边框相关
			var defaultNode = new JTopo.Node();
			defaultNode.text = 'cuif Node'; // 文字
			defaultNode.textPosition = 'Middle_Center';//文字位置， 居中
			defaultNode.textOffsetY = 8; //文字偏移量向下偏移
			defaultNode.font = '14px 微软雅黑';//字体设置
			defaultNode.setLocation(180, 100);// 位置
			defaultNode.setSize(100,60);// 尺寸
			defaultNode.borderRadius = 5;//边框圆角 
			defaultNode.borderWidth = 2;//边框宽度
			defaultNode.borderColor = '255,255,255';//边框颜色
			defaultNode.alpha = .4 ;//透明度
			scene.add(defaultNode);//节点添加至场景中
			
			var appleNode = new JTopo.Node();
			appleNode.alpha = 0.7;//透明度
			appleNode.setImage('./img/OS_Apple.png', true);//设置节点图片, true:显示图片原有尺寸, false:图片尺寸服从节点尺寸
			appleNode.setLocation(320, 80);
			appleNode.showSelected = false;//不显示选中矩形
			scene.add(appleNode);

			
			var textNode = new JTopo.TextNode('this is a text node.');//纯文本节点
			textNode.font = 'bold 16px 微软雅黑';
			textNode.setLocation(317,250);
			scene.add(textNode);
			
			
			var linkNode = new JTopo.LinkNode('超链接节点: http://www.baidu.com');
			linkNode.setLocation(250, 360);
			linkNode.href = 'http://www.baidu.com';
			linkNode.target = '_blank';
			linkNode.font = 'italic bold 16px 微软雅黑';
			linkNode.visitedColor = '0,0,255';//访问过后的颜色
			linkNode.shadowOffsetX = 5; // 阴影设置, 不知道什么用
			linkNode.shadowOffsetY = 16;
			scene.add(linkNode);
			
			var peopleNode = new JTopo.Node('people');
			peopleNode.setBound(500, 210, 64, 64); // 同时设置大小及位置
			peopleNode.setImage('./img/person.png');
			scene.add(peopleNode);
			
			
			var circleNode = new JTopo.CircleNode('circle');//圆形节点
			circleNode.setLocation(508, 100);
			circleNode.alpha = .7;
			circleNode.radius = 24;//半径;
			circleNode.fillColor = '0,0,255';//填充颜色
			circleNode.textPosition = 'Middle_Center';//文字位置
			scene.add(circleNode);
			
			var node = new JTopo.Node("自定义");
			node.setLocation(200, 210);
			node.width = node.height = 60; //设置长宽, 同:node.setSize(60,60);
			node.percent = 0.5;//设置一下占用的 百分比,装饰函数中使用到, 自定义参数,名字起什么都可以, 但是要对应函数里面的使用
			node.beginDegree = 0;//设置旋转角度其实点,装饰函数中使用到, 自定义参数,名字起什么都可以, 但是要对应函数里面的使用
			
			node.paint = function(g){ //自定义装饰函数 
				g.beginPath();//画笔开始
				g.moveTo(0,0);//设置圆心偏移量
				g.fillStyle = 'rgba(0,255,0,' + this.alpha + ')';//设置画笔使用的颜色 透明度
				g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree + 2*Math.PI*this.percent);//绘制圆
				//arc(x, y, 半径, 绘制起点, 绘制结束点); //绘制圆
				
				g.fill();//填充, 构建圆 和连接圆心偏移位置的连线 		
				g.closePath();//关闭画笔
				
				g.save();				
				g.beginPath();
				g.moveTo(0,0);
				g.fillStyle = 'rgba(255,255,0,' + this.alpha + ')';
				g.arc(0, 0, this.width/2-10, this.beginDegree, this.beginDegree + 2*Math.PI);				
				g.fill();
				g.closePath();								
				g.restore();
								
				this.paintText(g);
			}
			scene.add(node);
			
		});
	